<script setup>
import { inject, ref } from "vue";
import { onLoad, onShow } from "@dcloudio/uni-app";
import { useUpgrade } from "@/services/team";
import { userinfo, isPayPassApi, checkPayPass } from "@/services/user";

const coupons = ref("");
const password = ref("");

onShow(() => {
  isPayPassFun();
  getuserinfo();
});

const useUpgradeData = ref({});

const getuserinfo = async () => {
  let userdata = await userinfo();
  useUpgradeData.value.uid = userdata.data.uid;
};

const pay_pass = ref("");
const isPayPass = ref(0);
const isPayPassFun = async () => {
  try {
    let res = await isPayPassApi();
    if (res.code == 200) {
      isPayPass.value = res.data;
    }
  } catch (e) {
    uni.showToast({
      title: e.info,
      icon: "none",
    });
  }
};
const focusinput = ref(false);

const close = () => {
  showPassword.value = false;
  pay_pass.value = "";
  focusinput.value = false;
};

const showPassword = ref(false);
const useUpgradeFun = async () => {
  if (isPayPass.value != 0) {
    showPassword.value = true;
    pay_pass.value = "";
    setTimeout(() => {
      focusinput.value = true;
    }, 500);
  } else {
    uni.showToast({
      title: "没有支付密码，前往设置",
      icon: "none",
    });
    setTimeout(() => {
      uni.navigateTo({
        url: "/pages/mysetting/modify/index?isshowPassword=" + isPayPass.value,
      });
    }, 500);
    return;
  }
};

// 定义 finish 方法
const finish = async (e) => {
  pay_pass.value = e;
  useUpgradeData.value = {
    ...useUpgradeData.value,
    verify_code: coupons.value + password.value,
    pay_pass: pay_pass.value,
  };
  try {
    let res = await checkPayPass({ pay_pass: pay_pass.value });
    if (res.code == 200) {
      try {
        let res = await useUpgrade(useUpgradeData.value);
        uni.showToast({
          title: res.info,
          icon: "success",
        });
        setTimeout(() => {
          uni.redirectTo({
            url: "/pages/my//index",
          });
        }, 500);
        focusinput.value = false;
      } catch (e) {
        uni.showToast({
          title: e.info,
          icon: "none",
        });
        pay_pass.value = "";
        showPassword.value = false;
        focusinput.value = false;
      }
    }
  } catch (e) {
    uni.showToast({
      title: e.info,
      icon: "none",
    });
    pay_pass.value = "";
  }
};

const forgot = () => {
  uni.navigateTo({
    url: "/pages/mysetting/modify/index?isshowPassword=" + isPayPass.value,
  });
};
</script>

<template>
  <view class="exchangeCode">
    <view class="top-text"
      ><text>兑换码开通的身份，不含“赠品”，不计算“推荐人升级奖励”。</text></view
    >
    <view class="list">
      <text>身份兑换券</text>
      <view class="list-input">
        <up-input
          placeholder="请输入身份兑换券"
          border="surround"
          v-model="coupons"
          @change="change"
        ></up-input>
      </view>
    </view>
    <view class="list">
      <text>兑换密码</text>
      <view class="list-input">
        <up-input
          placeholder="请输入兑换密码"
          border="surround"
          v-model="password"
          @change="change"
        ></up-input>
      </view>
    </view>

    <view class="footer-btn" @click="useUpgradeFun">确认兑换升级</view>
  </view>

  <!-- 密码弹框 -->
  <view class="password_show">
    <u-popup
      :show="showPassword"
      mode="center"
      round="10"
      @close="close"
      @open="open"
    >
      <view class="password">
        <view class="popup-content-title">支付密码</view>
        <u-code-input
          v-model="pay_pass"
          :maxlength="6"
          dot
          size="80"
          @change="onChange"
          @finish="finish"
          :focus="focusinput"
        ></u-code-input>
        <view class="footer">
          <view class="closefun" @click="showPassword = false">取消</view>
          <view class="forgot" @click="forgot">忘记密码？</view>
        </view>
      </view>
    </u-popup>
  </view>
</template>

<style lang="scss" scoped>
@import "./exchangeCode.scss";
</style>
